<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-alert title="添加商品信息" type="warning" center show-icon> </el-alert>
    <!-- 步骤条 -->
    <el-steps
      :space="200"
      finish-status="success"
      :active="activeIndex - 0"
      align-center
    >
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- left -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-tabs
        :tab-position="tabPosition"
        :before-leave="beforeTabLeave"
        @tab-click="tabClicked"
        style="height: 600px"
        v-model="activeIndex"
      >
        <el-tab-pane label="基本信息" name="0">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="ruleForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="ruleForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="ruleForm.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="ruleForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="goods_cat">
            <el-cascader
              :options="options"
              :props="props"
              v-model="ruleForm.goods_cat"
              clearable
              @change="handleChange"
            >
            </el-cascader>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <div v-for="item in manyTableData" :key="item.attr_id">
              {{item.attr_name}}
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                :label="cb"
                v-for="(cb, i) in item.attr_vals"
                :key="i"
                border
              ></el-checkbox>
            </el-checkbox-group>
          </div>
          
          <!-- <el-form-item :label="item.attr_name" > -->

          <!-- </el-form-item> -->
        </el-tab-pane>
        <el-tab-pane label="商品属性" name="2">
 <div v-for="item in onlyTableData" :key="item.attr_id">
              {{item.attr_name}}
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                :label="cb"
                v-for="(cb, i) in item.attr_vals"
                :key="i"
                border
              ></el-checkbox>
            </el-checkbox-group>
          </div>
          <el-form-item>
            <el-checkbox-group>
              <el-checkbox label="" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="3"> 
          <el-upload
  class="upload-demo"
  :action="imgUrl"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
 :headers="headerObj" 
 :on-success="handleSuccess"
   list-type="picture"
  >
  <el-button size="small" type="primary">点击上传</el-button>
 
</el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
              <!-- 富文本编辑器组件 -->
            <quill-editor v-model="ruleForm.goods_introduce"></quill-editor>
            <!-- 添加商品的按钮 -->
            <el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-form>
      <!-- 图片预览 -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      <img :src="previewPath" alt="" class="previewImg" />
    </el-dialog>
  </div>
</template>

<script>
import { addgoods, getCategories, attrlist } from "../utils/api";
export default {
  props: {},
  data() {
    return {
        checkList:[],
      tabPosition: "left",
      activeIndex: 0,
      ruleForm: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        goods_cat: [],
      pics:[],
 goods_introduce: "",
        attrs: [],
      },
    imgUrl:'https://lianghj.top:8888/api/private/v1/upload',
    headerObj:{
        Authorization:localStorage.getItem('token')
    },
     previewPath: "", //预览路径
      previewVisible: false,
      options: [],
      props: {
        // checkStrictly: true,
        label: "cat_name",
        value: "cat_id",
      },
      // 动态参数列表数据
      manyTableData: [],
      // 静态属性列表数据
      onlyTableData: [],
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.render();
  },
  mounted() {},
  watch: {},
  methods: {
    render() {
      getCategories({ pagenum: 1, pagesize: 10 }).then((res) => {
        console.log(res);
        this.options = res.data.result;
      });
    },
    beforeTabLeave(news, olds) {
      console.log(news, olds, 11111111120);
      if (olds == 0 && this.ruleForm.goods_cat.length != 3) {
        this.$message.error("请选择商品分类为3级");
        return false;
      }
    },
 handlePreview(file) {
      console.log(file)
      let url = file.response.data.url
      this.previewPath = url
      this.previewVisible = true
    },
    // 级联选择器选中项变化，会触发这个函数-如果选择3级以下，下拉框内不显示
    handleChange() {
      console.log(this.ruleForm.goods_cat);
      if (this.ruleForm.goods_cat.length!= 3) {
        this.ruleForm.goods_cat = [];
      }
    },
    tabClicked() {
        console.log(169);
      let cateId = this.ruleForm.goods_cat[2];
      console.log(170, cateId);
      if (this.activeIndex == 1) {
        attrlist({ id: cateId, sel: "many" }).then((res) => {
          if (res.meta.status == 200) {
            this.$message.success("获取动态参数成功");
            res.data.forEach((item) => {
              item.attr_vals = item.attr_vals.split(" ");
              item.newVals = JSON.parse(JSON.stringify(item.attr_vals));
            });
            this.manyTableData = res.data;
          }
        });
      } else if (this.activeIndex == 2) {
           attrlist({ id: cateId, sel: "only" }).then((res) => {
          if (res.meta.status == 200) {
            this.$message.success("获取动态参数成功");
            res.data.forEach((item) => {
              item.attr_vals = item.attr_vals.split(" ");
              item.newVals = JSON.parse(JSON.stringify(item.attr_vals));
            });
            this.onlyTableData = res.data;
          }
        });
      }
    },
       handleRemove(file) {
        console.log(file);
        let tmp_path =file.response.data.tmp_path
        let i=this.ruleForm.pics.findIndex(item=>item.pic==tmp_path)
        this.ruleForm.pics.splice(i,1)
      },
      handleSuccess(res) {
           console.log(230, res) //成功响应有临时路径，还有正式地址
      let picStr = { pic: res.data.tmp_path } //注意要按照接口里要求的键拼接 {'pic':'上传成功后的临时路径'}
      this.ruleForm.pics.push(picStr)
      },
      add(){}
  },
  components: {},
};
</script>

<style scoped lang="scss">
.el-checkbox {
  margin: 0 10px 0 0 !important;
}

.previewImg {
  width: 100%;
}

.btnAdd {
  margin-top: 15px;
}

::v-deep .ql-editor {
  min-height: 300px;
}
</style>
